<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的火车票订单</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    body {
      background-color: #f5f7fa;
      padding: 20px;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    #app {
      max-width: 900px;
      margin: 20px auto;
    }

    .page-title {
      text-align: center;
      color: #303133;
      font-size: 26px;
      margin-bottom: 30px;
    }

    .order-card {
      margin-bottom: 25px;
      border-radius: 8px;
    }

    .order-card .el-card__header {
      background-color: #fafafa;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .order-id {
      font-weight: bold;
      color: #409EFF;
    }

    .order-date {
      font-size: 14px;
      color: #909399;
    }

    .section-title {
      font-size: 18px;
      color: #303133;
      margin-top: 20px;
      margin-bottom: 15px;
      padding-left: 10px;
      border-left: 4px solid #409EFF;
    }

    .passenger-descriptions {
      margin-bottom: 15px;
    }
  </style>
</head>
<body>

<div id="app">
  <h1 class="page-title">我的火车票订单</h1>

  <div v-if="orders.length > 0">
    <el-card v-for="order in orders" :key="order.orderId" class="order-card" v-if="order.tickets && order.tickets.length > 0">
      <div slot="header" class="card-header">
        <span>订单号: <span class="order-id">{{ order.orderId }}</span></span>
        <span class="order-date">下单时间: {{ order.orderTime }}</span>
      </div>

      <div>
        <h3 class="section-title">车次信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="列车号">{{ order.tickets[0].trainNum }}</el-descriptions-item>
          <el-descriptions-item label="出发站">{{ order.tickets[0].startStation }}</el-descriptions-item>
          <el-descriptions-item label="到达站">{{ order.tickets[0].endStation }}</el-descriptions-item>
          <el-descriptions-item label="总耗时">{{ calculateDuration(order.tickets[0].startTime, order.tickets[0].endTime) }}</el-descriptions-item>
          <el-descriptions-item label="发车时间">
            <el-tag size="small">{{ order.tickets[0].startTime }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="到达时间">
            <el-tag size="small">{{ order.tickets[0].endTime }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>

        <h3 class="section-title">乘客信息 (共 {{ order.tickets.length }} 人)</h3>
        <el-descriptions
                v-for="(ticket, index) in order.tickets"
                :key="ticket.id"
                class="passenger-descriptions"
                :title="'乘客 ' + (index + 1)"
                :column="2"
                border
        >
          <el-descriptions-item label="姓名">{{ ticket.passengerName }}</el-descriptions-item>
          <el-descriptions-item label="座位等级">{{ getSeatTypeName(ticket.seatType) }}</el-descriptions-item>
          <el-descriptions-item label="证件类型">{{ getPassengerIdTypeName(ticket.passengerIdType) }}</el-descriptions-item>
          <el-descriptions-item label="证件号码">{{ ticket.passengerId }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>

  <el-empty v-else description="暂无订单信息"></el-empty>

</div>

<script src="../../js/axios-0.18.0.js"></script>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/request.js"></script>


<script>
  new Vue({
    el: '#app',
    mounted(){
      this.select();
    },
    data() {
      return {
        // Mock data will be replaced by the API call in mounted()
        orders: []
      }
    },
    methods: {
      // 将座位类型的数字转换为文字描述
      getSeatTypeName(type) {
        const seatTypeMap = {
          0: '商务座',
          1: '一等座',
          2: '二等座',
          3: '无座'
        };
        return seatTypeMap[type] || '未知席别';
      },

      // 【新增方法】: 将证件类型的数字转换为文字描述
      getPassengerIdTypeName(code) {
        const idTypeMap = {
          0: '身份证',
          1: '护照',
          2: '港澳台通行证'
        };
        return idTypeMap[code] || '未知证件';
      },

      // 计算出发和到达时间的总耗时
      calculateDuration(startTime, endTime) {
        const start = new Date(startTime.replace(/-/g, '/')).getTime();
        const end = new Date(endTime.replace(/-/g, '/')).getTime();

        if (isNaN(start) || isNaN(end)) {
          return '无法计算';
        }

        const diff = end - start; // 毫秒差

        const hours = Math.floor(diff / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

        let duration = '';
        if (hours > 0) {
          duration += `${hours}小时`;
        }
        if (minutes > 0) {
          duration += `${minutes}分钟`;
        }

        return duration || '少于1分钟';
      },
      select(){
        var _this=this;
        axios({
          method:"get",
          url:"http://localhost:8080/order",
        }).then(function (resp) {
          if(resp.data.code === 1){
            // 确保即使后端返回 null，orders 也是一个数组
            _this.orders = resp.data.data || [];
          }else {
            _this.$message({
              showClose: true,
              message: '查询出错了',
              type: 'error'
            });
          }
        })
      }

    }
  });
</script>

</body>
</html>